<template>
  <div class="peo-content">
    <div v-if="peopledata?.friend_id != undefined">
      <div class="peo-content-body">
        <div class="body-top">
          <img class="body-avatar" :src="peopledata.friend_avatar" alt="" />
          <div>
            <div class="body-name">{{ peopledata.friend_nickname }}</div>
            <div class="body-username">{{ peopledata.friend_username }}</div>
          </div>
        </div>
        <div class="body-bottom">
          <div
            class="notes"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div class="title">备注</div>
            <div class="num" v-if="notesopen" @click="changenotes">
              {{
                peopledata.friend_notes
                  ? peopledata.friend_notes
                  : "点击添加备注"
              }}
            </div>
            <input
              v-else
              type="text"
              v-model="peopledata.friend_notes"
              @blur="changenotes"
              ref="noteinp"
              placeholder="请输入备注"
            />
          </div>
          <div
            class="group"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
            "
          >
            <div class="title">好友分组</div>
            <div class="num" style="display: flex; justify-content: end">
              <el-select
                v-model="peopledata.group_id"
                placeholder="Select"
                style="width: 50%"
                @change="handleChange1"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.group_id"
                  :label="item.group_name"
                  :value="item.group_id"
                />
              </el-select>
            </div>
          </div>
          <div
            class="signature"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
            "
          >
            <div class="title">签名</div>
            <div class="num">{{ peopledata.friend_signature }}</div>
          </div>
        </div>
        <div class="body-footer">
          <el-button type="primary" @click="sendmessage">发消息</el-button>
        </div>
      </div>
    </div>
    <div class="peo-nohave" v-else>
      <img
        style="width: 200px; height: 200px"
        src="../../../../public/11.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { changeRemark, getFriendGroup, changeGroup } from '@/api/message'
export default {
  props: {
    peopledata: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      notesopen: true,
      value1: 1,
      groupList: []
    }
  },
  mounted() {
    this.getFriendGroup()
    this.value1 = this.peopledata.group_id
  },
  methods: {
    sendmessage() {
      this.$emit('sendmessage', this.peopledata)
    },
    changenotes() {
      if (this.notesopen) {
        this.notesopen = false
        this.$nextTick(() => {
          this.$refs.noteinp.focus()
        })
      } else {
        this.notesopen = true
        changeRemark({
          UserId: localStorage.getItem('userId'),
          ThatId: this.peopledata.that_id,
          notes: this.peopledata.friend_notes
        }).then(res => {
          this.$emit('changenotes', this.peopledata)
        })
      }
    },
    getFriendGroup() {
      getFriendGroup({
        UserId: localStorage.getItem('userId'),
      }).then(res => {
        if (res.code === 200) {
          this.groupList = res.data
        }
      })
    },
    handleChange1(val) {
      changeGroup({
        UserId: localStorage.getItem('userId'),
        ThatId: this.peopledata.that_id,
        GroupId: val,
      }).then(res => {
        this.$emit('changeGroup', this.peopledata, val)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.peo-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .peo-content-body {
    height: 500px;
    width: 700px;
    // background: red;
  }
  .peo-nohave {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .body-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .body-top {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px;
  }
  .body-bottom {
    margin-top: 10px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  .body-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
}
</style>